<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>JS Bin Help</title>
<style>
body { font: 13px/1.3em "helvetica neue";}
pre {
  padding: 10px;
  background: #eee;
  overflow-x: auto;
}

code { font-family: Monaco, 'Courier New'; }
</style>
</head>
<body>
  <h1>Hacker tips</h1>
  
  <h2>Adding your own custom libraries</h2>
  <p>JS Bin comes with out of the box support for a number of libraries, but if you're comfortable on the command line, you can add your own (I plan to add the UI to do this eventually if it's a useful function).</p>
  <p>The format for a new library entry is as follows:</p>
  <pre><code>{ 
text: 'My Category',
requires: 'http://someotherlibary.com/lib.js', <span style="color: green;">// optional</span>
style: 'http://someotherlibary.com/style.css', <span style="color: green;">// optional</span>
scripts: [
  { text: 'My library', url: 'http://foo.com/somelib.js' }
]
}</code></pre>

  <p>There's a variable called <code>libraries</code> on the global namespace, with two methods: <code>add</code> and <code>clear</code>.</p>
  <p>To add this library, open your console, and run the following (changing the library for your own):</p>
  <pre><code>libraries.add({ text: 'My Libraries', scripts: [ { text: 'Foo 1.0', url: 'http://foo.com/bar-1.0.js' } ] });</code></pre>
  <p>These changes will save to your browser (on those browsers that support the Storage API - all the latest versions of browsers), and will remain until you call <code>libraries.clear()</code></p>
  
  <h2>Create your own bespoke url namespace</h2>
  <p>You can trick JS Bin in to thinking the bin has already been created by accessing the url directly, such as <a href="http://jsbin.com/foo/edit">http://jsbin.com/foo/edit</a>.  At this point the code isn't saved and technically you've hit a non existent namespace. Once you hit 'new revision', it save a new revision. At that point the code is saved, and successive revisions will be saved (i.e. revision 2 and onwards).</p>
</body>
</html>